<template>
  <div>
    <div class="had">
      <header class="header">
        <h5>个人中心</h5>
      </header>
    </div>
    <!-- header -->
    <div class="container">
      <div class="bg">
        <van-image
          :src="require('../images/bg.jpg')"
          style="height: 4.8rem; width: 100%"
        />
        <div class="bg-abs">
          <!-- 头像 -->
          <div @click="loginClick">
            <van-image
              :src="
                userInfo.avatar
                  ? userInfo.avatar
                  : require('../images/demo/demo6.jpg')
              "
              round
              class="portrait"
            />
            <span class="icon-span">{{
              userInfo.nickname ? userInfo.nickname : "登陆/注册"
            }}</span>
          </div>

          <!-- 积分 -->
          <div class="integral">
            <div class="integral-p">
              <van-icon name="gem-o" />
              会员积分
              <span>&nbsp;0.00</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 订单部分 -->
      <div class="order" v-if="status == 1">
        <h6>我的订单</h6>
        <p>全部订单<van-icon name="arrow" /></p>
      </div>
      <section>
        <!-- 收货部分 -->
        <div class="receiving">
          <myfour-list :list="list" v-if="status == 1"></myfour-list>
          <my-list :title="title"></my-list>
        </div>
        <divider></divider>
        <p class="layout" @click="layClick" v-if="status == 1">退出登录</p>
      </section>
    </div>

    <tabbbar></tabbbar>
  </div>
</template>

<script>
import myList from "../components/myList.vue";
import myfourList from "../components/myfourList.vue";
import { Dialog } from "vant";
import { Toast } from "vant";
import Divider from "../components/divider.vue";
import Tabbbar from "../components/tabbbar.vue";
import { mapState, mapMutations, createLogger } from "vuex";
export default {
  components: {
    myList,
    [Dialog.Component.name]: Dialog.Component,
    Divider,
    myfourList,
    Tabbbar,
  },
  name: "Myfile",

  data() {
    return {
      active: "myfile",
      list: [
        {
          name: "待发货",
          icon: "icon-daifahuo",
        },
        {
          name: "已收货",
          icon: "icon-yishouhuo",
        },
        {
          name: "待发货",
          icon: "icon-daifukuan",
        },
        {
          name: "待评价",
          icon: "icon-weipingjia",
        },
      ],
      title: [
        {
          title: "小米会员",
          icon: "icon-icon_vip",
          color: "#FDBF2E",
        },
        {
          title: "会员中心",
          icon: "icon-icon-huangguan",
          color: "#FCBE2D",
        },
        {
          title: "服务中心",
          icon: "icon-xiai",
          color: "#FA6C5E",
        },
        {
          title: "小米之家",
          icon: "icon-xiaomi",
          color: "#FE8B42",
        },
        {
          title: "更多功能",
          icon: "icon-gengduo",
          color: "#9ED45A",
        },
      ],
    };
  },
  methods: {
    ...mapMutations(["loginOut"], ["clearCart"]),
    layClick() {
      Dialog.confirm({
        title: "是否退出登录，退出后不保留数据",
        message: "",
      })
        .then(() => {
          Toast.success("退出成功");
          // this.$store.dispatch('layout')
          this.$axios({
            url: "/logout",
            method: "post",
            data: {},
            headers: {
              token: true,
              //  token:JSON.parse(sessionStorage.getItem('token'))
            },
          }).then((v) => {
            console.log("1111111111222222");
            console.log(v);
          });
          this.$router.push("/Login");

          setTimeout(() => {
            this.loginOut();
          }, 100);
        })
        .catch(() => {
          //
        });
      // console.log(111);
    },
    loginClick() {
      this.$router.push("/Login");
    },
  },

  mounted() {
    console.log(this.status);
    if (this.status == 1) {
      var cart = this.$store.dispatch("updateCartList");
    } else {
      this.$store.commit("clearCart");
    }
    this.$store.commit("initUser");
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      // token: (state) => state.user.token,
      status: (state) => state.user.status,
    }),
  },
};
</script>

<style scoped>
h5 {
  font-size: 0.586667rem;
}
.container {
  width: 100%;
  height: calc(100vh - 95px);
  /* background-color: chartreuse; */
  overflow: auto;
}
.had {
  height: 45px;
  width: 100%;
}
.header {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: fixed;
  background-color: #fff;
  z-index: 999;
}
.bg {
  position: relative;
  width: 100%;
  height: 4.8rem;
  background-color: blueviolet;
}
.bg-abs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  /* justify-content: center; */
  width: 10rem;
  bottom: 0.266667rem;
  margin: 0 0 0.533333rem 0;
}
.portrait {
  width: 2.133333rem;
  margin-left: 0.8rem;
  height: 2.133333rem;
  vertical-align: middle;
}
.icon-span {
  margin-left: 0.2667rem;
  color: #fff;
  font-size: 0.4267rem;
  letter-spacing: 0.0533rem; /* 字间距 */
  font-weight: 700;
}
.icon-span:active {
  color: red;
  border-bottom: red 2px solid;
}
.integral {
  text-align: right;
  display: inline-block;
}
.integral-p {
  width: 3.466667rem;
  float: right;
  height: 1.066667rem;
  font-size: 0.426667rem;
  color: red;
  line-height: 1.066667rem;
  background-color: #ffd43f;
  border-radius: 0.533333rem 0 0 0.533333rem;
}
.order {
  display: flex;
  justify-content: space-between;
  margin: 0.133333rem 0.266667rem;
}

/* 退出登录 */
.layout {
  width: 100%;
  height: 1.066667rem;
  line-height: 1.066667rem;
  text-align: center;
}
.layout:active {
  background-color: #eee;
}
</style>